<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <!-- Include stylesheet -->
  <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
  <link rel="stylesheet" th:href="@{/css/FuWenBeng.css}">
    <link rel="stylesheet" th:href="@{/css/scolumn.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}" />
    <link rel="stylesheet" th:href="@{/css/BVideo.css}" />
    <style>

</style>
</head>
<body>
    <div class="container-fluid bmTopDiv">
        <div class="col-md-1 bmTopLogoFont">
            <h3>BhSyVideo</h3>
        </div>
        <div class="col-md-2 bmTopXxDiv">
            <ul class="">
                <li class="bmToplif"><a style="text-decoration: none;color: white" th:href="@{/bhsy/theMain}"> 首页</a></li>
            </ul>
        </div>
    </div>
    <input id="sUid" th:value="${sUid}" style="display: none">
    <input id="sName" th:value="${sName}" style="display: none">
    <input id="sid" th:value="${sid}" style="display: none">
    <div class="scolZlMainDiv">
        <div class="scolTopFontDiv">
            测试1
        </div>
        <div class="scolUserMainDiv">
            <img class="userImg" th:src="@{/images/d.jpg}">
            <p class="userName">一石上真男人</p>
            <p class="userFs">粉丝:</p>
            <p class="sid" hidden="hidden"></p>
            <input class="gzBtn" type="button" value="关注">
        </div>
        <!-- Create the editor container -->

        <div id="editor" style="font-size: 18px">

        </div>
    </div>
    <div class="operation">
        <a id="dz"><img id="dzimg" class="" th:src="@{/images/HImgAll/dz2.png}"><span class="dz">点赞量</span></a>
    </div>
    <div class="comments">
        <span class="pl">评论</span>
        <hr/>
        <div class="addcom">
            <div class="addzuo">
                <img class="myImg" th:src="@{/images/d.jpg}">
            </div>
            <div class="addyou">
                <i class="ipt-arrow"></i>
                <textarea cols="80" name="msg" rows="5" placeholder="发一条友善的评论" class="ipt-txt"></textarea>
                <button type="submit" id="pl">发表评论</button>
            </div>
        </div>
        <div id="takeDiv" th:each="h:${list}">
            <div class="show">
                <div class="showzuo">
                    <a class="showzuoa1" href="#"><span class="tid" th:text="${h.tid}" hidden="hidden"></span>
                        <img class="showzuoimg1" th:src="${h.uImg}">
                    </a>
                </div>
                <div  class="showyou">
                    <div class="syouon">
                        <a class="syouona1" href="#" th:text="${h.uName}" >id名</a>
                    </div>
                    <p class="showyoup1" th:text="${h.tMsg}">评论内容</p>
                    <div class="syouinfo">
                        <span class="syouinfospan1" th:text="${#dates.format(h.tTime,'yyyy-MM-dd HH:mm:ss')}">评论时间</span>
                        <a class="syouinfoa1" ><img class="syouinfoimg1" id="tdzimg" th:src="@{/images/good1.png}"><span class="syouinfospan2" th:text="${h.tdz}">点赞数量</span></a>
                        <a class="syouinfoa2" ><img class="syouinfoimg2" id="tcpimg" th:src="@{/images/poor1.png}"><span class="syouinfospan3" th:text="${h.tcp}">反对数量</span></a>
                    </div>
                    <div class="paging-box"></div>
                </div>
            </div>
        </div>

    </div>


</body>
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script th:src="@{/js/jquery-360.min.js}"></script>
<script th:src="@{/js/Quill.js}"></script>
<script>
<!--  ql-editor  -->

    $.ajax({
        url:"/zl/Bhscolumn/"+$("#sUid").val()+"/"+$("#sid").val()+"/"+$("#sName").val(),
        success:function (data) {
            console.log(data);
            var bscolumn = data.map.bscolumn;
            var buser=data.map.buser;
            var bus=data.map.bus;
            console.log(bus)
            $(".ql-editor").html("");
            $(".ql-editor").html(bscolumn.smsg)
            $(".userName").html(buser.uname)
            $(".userImg").attr("src",buser.uimg)
            $(".scolTopFontDiv").html(bscolumn.sname)
            $(".sid").html(bscolumn.sid)
            $(".uid").html(buser.uid)
            $(".myImg").attr("src",bus.uimg);
            $(".dz").html(bscolumn.sup);

            if (bscolumn.simg!=""){
                var slImg = bscolumn.simg.split(",");
                var sImg = document.getElementsByClassName("ql-editor")[0].querySelectorAll("img");
                for (let i = 0; i < slImg.length ; i++) {
                    console.log(slImg[i]);
                    sImg[i].src="http://r1xjdohxw.hn-bkt.clouddn.com/"+slImg[i];
                }
            }
            $("#editor").css("border","none");
            $(".ql-toolbar").css("display","none");
            quill.enable(false);
        }
    })
    $(function () {
        $("#dz").click(function () {
            var sid= $(".sid").text();
            var dzl= $(".dz").text();
            $.ajax({
                url:"/zl/zldz",
                type:"put",
                data:{
                    "sid":sid
                },
                success:function (data) {
                    var n=1;
                    n=n+Number(dzl);
                    $(".dz").text(n);
                    console.log(data)

                }
            })
        })
        var syouinfoa1 = document.getElementsByClassName("syouinfoa1");
        var syouinfoaImg1 = document.getElementsByClassName("syouinfoimg1");
        var syouinfoa2 = document.getElementsByClassName("syouinfoa2");
        var syouinfoaImg2 = document.getElementsByClassName("syouinfoimg2");
        var tid=document.getElementsByClassName("tid");
        var syouinfospan2=document.getElementsByClassName("syouinfospan2");
        var syouinfospan3=document.getElementsByClassName("syouinfospan3");
        for (let i = 0; i < syouinfoa1.length ; i++) {
            syouinfoa1[i].onclick = function () {
                syouinfoaImg1[i].src="/images/good2.png";
                var utid=tid[i];
                var utid2=utid.innerText;
                var dzsl = syouinfospan2[i].innerHTML;
                // alert(dzsl)
                $.ajax({
                    url:"/zl/dz",
                    type: "put",
                    data: {
                        "tid":utid2,
                        // "_method":"put",
                    },
                    success:function (data) {
                        var n=1;
                        n= n+Number(dzsl);
                        syouinfospan2[i].innerHTML=n;
                        // text(dzsl+1)
                        console.log(data)
                    }
                })
            }
        }
        for (let i=0;i<syouinfoa2.length;i++) {
            syouinfoa2[i].onclick = function () {
                syouinfoaImg2[i].src = "/images/poor2.png"
                var utid = tid[i];
                var utid2 = utid.innerText;
                var cpsl = syouinfospan3[i].innerHTML;
                $.ajax({
                    url: "/zl/cp",
                    type: "put",
                    data: {
                        "tid": utid2,
                    },
                    success: function (data) {
                        var n = 1;
                        n = n + Number(cpsl);
                        syouinfospan3[i].innerHTML = n;
                        // text(dzsl+1)
                        console.log(data)
                    }
                })
            }
        }
    })
    $("#dz").click(function () {
        $("#dzimg").attr("src","/images/HImgAll/dz1.png")
    })
    $("#sc").click(function () {
        $("#scimg").attr("src","/images/HImgAll/sc1.png")
    })

        Date.prototype.Format = function (fmt) {
            var o = {
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "H+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds(), //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }
    $("#pl").click(function () {
        var sid=$(".sid").text();
        var tmsg=$(".ipt-txt").val();
        var thisdata=new Date().Format("yyyy-MM-dd HH:mm:ss");
        $.ajax({
            url:"/zl/pl",
            type:"post",
            data:{
                "vsid":sid,
                "tmsg":tmsg,
            },
            success:function (data) {
                console.log(data);
                var buser=data.map.bUser;
                // var div1=$('<div></div>').attr("id",'takeDiv');
                var show=$('<div></div>').attr("class",'show');
                var showzuo=$('<div></div>').attr("class",'showzuo');
                var showzuoa1=$('<a></a>').attr("class",'showzuoa1');
                var showzuoimg1=$('<img/>').attr("src",buser.uimg).attr("class",'showzuoimg');
                var showyou=$('<div></div>').attr("class",'showyou');
                var syouon=$('<div></div>').attr("class",'syouon');
                var syouona1=$('<a></a>').text(buser.uname).attr("class",'syouona1');
                var showyoup1=$('<p></p>').text(tmsg).attr("class",'showyoup1');
                var syouinfo=$('<div></div>').attr("class",'syouinfo');
                var syouinfospan1=$('<span></span>').text(thisdata).attr("class",'syouinfospan1');
                var syouinfoa1=$('<a></a>').attr("class",'syouinfoa1');
                var syouinfoa2=$('<a></a>').attr("class",'syouinfoa2');
                var syouinfoimg1=$('<img/>').attr("src","/images/good1.png").attr("class",'syouinfoimg1');
                var syouinfoimg2=$('<img/>').attr("src","/images/poor1.png").attr("class",'syouinfoimg2');
                var syouinfospan2=$('<span></span>').text(0).attr("class",'syouinfospan2');
                var syouinfospan3=$('<span></span>').text(0).attr("class",'syouinfospan3');
                $("#takeDiv").append(show);
                show.append(showzuo);
                showzuo.append(showzuoa1);
                showzuo.append(showzuoimg1);
                show.append(showyou);
                showyou.append(syouon);
                syouon.append(syouona1);
                showyou.append(showyoup1);
                showyou.append(syouinfo);
                syouinfo.append(syouinfospan1);
                syouinfo.append(syouinfoa1);
                syouinfo.append(syouinfoa2);
                syouinfoa1.append(syouinfoimg1);
                syouinfoa2.append(syouinfoimg2);
                syouinfoa1.append(syouinfospan2);
                syouinfoa2.append(syouinfospan3);

                var syouinfoa1 = document.getElementsByClassName("syouinfoa1");
                var syouinfoaImg1 = document.getElementsByClassName("syouinfoimg1");
                var syouinfoa2 = document.getElementsByClassName("syouinfoa2");
                var syouinfoaImg2 = document.getElementsByClassName("syouinfoimg2");
                var tid=document.getElementsByClassName("tid");
                var syouinfospan2=document.getElementsByClassName("syouinfospan2");
                var syouinfospan3=document.getElementsByClassName("syouinfospan3");
                for (let i = 0; i < syouinfoa1.length ; i++) {
                    syouinfoa1[i].onclick = function () {
                        syouinfoaImg1[i].src="/images/good2.png";
                        var utid=tid[i];
                        var utid2=utid.innerText;
                        var dzsl = syouinfospan2[i].innerHTML;
                        // alert(dzsl)
                        $.ajax({
                            url:"/zl/dz",
                            type: "put",
                            data: {
                                "tid":utid2,
                                // "_method":"put",
                            },
                            success:function (data) {
                                var n=1;
                                n= n+Number(dzsl);
                                syouinfospan2[i].innerHTML=n;
                                // text(dzsl+1)
                                console.log(data)
                            }
                        })
                    }
                }
                for (let i=0;i<syouinfoa2.length;i++) {
                    syouinfoa2[i].onclick = function () {
                        syouinfoaImg2[i].src = "/images/poor2.png"
                        var utid = tid[i];
                        var utid2 = utid.innerText;
                        var cpsl = syouinfospan3[i].innerHTML;
                        $.ajax({
                            url: "/zl/cp",
                            type: "put",
                            data: {
                                "tid": utid2,
                            },
                            success: function (data) {
                                var n = 1;
                                n = n + Number(cpsl);
                                syouinfospan3[i].innerHTML = n;
                                // text(dzsl+1)
                                console.log(data)
                            }
                        })
                    }
                }
                alert("评论成功");
                $(".ipt-txt").val("");

            }

        })
    })

</script>
</html>